"use client"
import { useState,useEffect } from "react";
import { useRouter } from "next/navigation";

export default function SubPage() {
    const router = useRouter();
    const [username,setUsername] = useState("");
    useEffect(() => {
        let result = window.localStorage.getItem("USERNAME");
        setUsername(result);
    },[])
    const plans = [
        {
            id: 1,title:"入门款",
            content: "适合新手体验",
            price: "8.8元",
            planClassName: 'plana',
            spuId:4,
            stockId:2,
            area: {
                type: 'warning',
                text: "台湾、新加坡、美国、日本、澳洲"
            },
            sole: {
                type: 'warning',
                text: "非独享"
            },
            rate: {
                type: 'warning',
                text: "适中，小概率被挤"
            }
        },
        {
            id: 2,title:"标准版",
            spuId:4,
            stockId:1,
            content: "部分地区有限制",
            planClassName: 'planb',
            price: "20元",
            area: {
                type: 'warning',
                text: "台湾、新加坡、美国、日本、澳洲"
            },
            sole: {
                type: 'success',
                text: "是，可自定义PIN"
            },
            rate: {
                type: 'success',
                text: "极高，支持原号续费"
            }
        },
        {
            id: 3,title:"全球版",
            content: "全球可用，无限制",
            spuId:4,
            stockId:3,
            planClassName: 'planc',
            price: "25元",
            area: {
                type: 'success',
                text: "无限制，全球可用"
            },
            sole: {
                type: 'success',
                text: "是，可自定义PIN"
            },
            rate: {
                type: 'success',
                text: "极高，支持原号续费"
            }
        }
    ]

    const [actPlan,setActPlan] = useState(plans[2]);

    function subHandler(){
        window.localStorage.setItem("PLAN",JSON.stringify(actPlan));
        router.push('/pay');
    }   

    return (
        <main className="relative  bg-white">
       
            <div className="w-full ">
                <header className="w-full h-12 md:h-20  mx-auto flex items-center border-b px-2 lg:px-10 md:px-20 ">
                    <a className="w-20 md:w-32 lg:w-44" href="https://ok123.shop">
                        <img src="Netflix_Logo_PMS.png"/>
                    </a>
                    <div className="flex-1 text-right flex items-center gap-2 w-full justify-end pr-3 xl:pr-0">
                        <p className="text-gray-500">{username}</p>
                        <a href="/" className="mya text-sm">注销</a>
                    </div>
                </header>
            </div>
            <div className="max-w-5xl w-full mx-auto pt-10 px-4 md:px-2 lg:px-0">
                <p>第 2/3 步</p> 
                <h2 className="text-lg md:text-4xl font-bold my-2 md:my-4">请选择您青睐的订阅方案</h2>
               
                <div className="gap-2 pt-1 flex md:hidden">
                    {
                        plans.map((item,index) => (
                            <div key={item.id} className={` relative border mt-6 p-2 flex-1 rounded-lg h-28  
                                ${actPlan.id === item.id ? item.planClassName + ' text-white' : null} 
                                ${index == 2 ? 'rounded-t-none border-t-0' : null}
                            
                            `}
                                onClick={e => setActPlan(item)}
                            >
                                <div className={
                                `
                                    absolute right-0 -top-6 text-center text-sm justify-center flex flex-col items-center text-white bg-zinc-600 w-full rounded-t-xl h-6 
                                    ${index == 2 ? 'block' : 'hidden'}
                                    ${actPlan.id === item.id ? '!bg-red-600' : null}
                                `
                                }>
                                    最受欢迎
                                </div>
                                <p className="text-sm font-bold">{item.title}</p>
                                <p className="text-sm ">{item.content}</p>
                                {
                                        actPlan.id === item.id ? 
                                        (
                                            <div className={`flex justify-end absolute right-2 bottom-2`}>
                                                <svg width="14" height="14" viewBox="0 0 24 22" fill="none" className="success-icon" data-uia="success-svg">
                                                    <path fillRule="evenodd" clipRule="evenodd" d="M12.0183 21.0833C17.7761 21.0833 22.4438 16.5688 22.4438 11C22.4438 5.43112 17.7761 0.916656 12.0183 0.916656C6.26044 0.916656 1.59277 5.43112 1.59277 11C1.59277 16.5688 6.26044 21.0833 12.0183 21.0833ZM11.7407 14.3982L17.4273 8.89817L16.087 7.60181L11.0705 12.4536L8.89738 10.3518L7.55702 11.6482L10.4004 14.3982L11.0705 15.0463L11.7407 14.3982Z" 
                                                    fill="#fff"></path>
                                                </svg>
                                            </div>
                                        ) 
                                        : null
                                    }
                            </div>
                        ))
                    }
                    
                </div>
                <div className="md:hidden border mt-4 rounded-lg">
                    <div className="px-4 py-2">
                        <div className="border-b border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">月付费用 （30天）</p>
                            <p className="font-bold">{actPlan.price}</p>
                        </div>
                    </div>
                    <div className="px-4 py-2">
                        <div className="border-b border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">影音画质</p>
                            <p className="font-bold">4K + HDR + 双杜比</p>
                        </div>
                    </div>
                    <div className="px-4 py-2">
                        <div className="border-b border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">支持设备</p>
                            <p className="font-bold">全设备</p>
                        </div>
                    </div>
                    <div className="px-4 py-2">
                        <div className="border-b border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">可观影地区</p>
                            <p className={`font-bold ${actPlan.area.type === 'success' ? 'text-green-600' : ''}`}>{actPlan.area.text}</p>
                        </div>
                    </div>
                    <div className="px-4 py-2">
                        <div className="border-b border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">是否独立车位</p>
                            <p className={`font-bold ${actPlan.sole.type === 'success' ? 'text-green-600' : ''}`}>{actPlan.sole.text}</p>
                        </div>
                    </div>
                    <div className="px-4 py-2">
                        <div className="border-gray-400 pb-2">
                            <p className="text-sm text-gray-500">稳定性</p>
                            <p className={`font-bold ${actPlan.rate.type === 'success' ? 'text-green-600' : ''}`}>{actPlan.rate.text}</p>
                        </div>
                    </div>
                </div>

                <div className="gap-2 pt-10 hidden md:flex">
                    {
                        plans.map((item,index) => (
                            <div key={item.id} className={`
                                relative flex-1 rounded-xl border border-zinc-400 cursor-pointer 
                                ${index == 2 ? 'rounded-t-none border-t-0' : null}

                            `}
                                onClick={e => setActPlan(item)}
                            >
                                <div className={
                                `
                                    absolute right-0 -top-6 text-center text-sm justify-center flex flex-col items-center text-white bg-zinc-600 w-full rounded-t-xl h-6 
                                    ${index == 2 ? 'block' : 'hidden'}
                                    ${actPlan.id === item.id ? '!bg-red-600' : null}
                                `
                                }>
                                    最受欢迎
                                </div>
                                <div className={`default-ltr-cache-hljwm5 ${index === 0 ? 'plana' : index === 1 ? 'planb' : 'planc'}`}>
                                    <p className="text-white text-xl">{item.title}</p>
                                    <p className="text-sm">{item.content}</p>
                                    {
                                        actPlan.id === item.id ? 
                                        (
                                            <div className="flex justify-end pt-2">
                                                <svg width="14" height="14" viewBox="0 0 24 22" fill="none" className="success-icon" data-uia="success-svg">
                                                    <path fillRule="evenodd" clipRule="evenodd" d="M12.0183 21.0833C17.7761 21.0833 22.4438 16.5688 22.4438 11C22.4438 5.43112 17.7761 0.916656 12.0183 0.916656C6.26044 0.916656 1.59277 5.43112 1.59277 11C1.59277 16.5688 6.26044 21.0833 12.0183 21.0833ZM11.7407 14.3982L17.4273 8.89817L16.087 7.60181L11.0705 12.4536L8.89738 10.3518L7.55702 11.6482L10.4004 14.3982L11.0705 15.0463L11.7407 14.3982Z" 
                                                    fill="#fff"></path>
                                                </svg>
                                            </div>
                                        ) 
                                        : null
                                    }
                                    
                                </div>

                                <div className="px-4 py-2">
                                    <div className="mb-4 border-b border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">月付费用 （30天）</p>
                                        <p className="font-bold">{item.price}</p>
                                    </div>
                                </div>
                                <div className="px-4 py-2">
                                    <div className="mb-4 border-b border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">影音画质</p>
                                        <p className="font-bold">4K + HDR + 双杜比</p>
                                    </div>
                                </div>
                                <div className="px-4 py-2">
                                    <div className="mb-4 border-b border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">支持设备</p>
                                        <p className="font-bold">全设备</p>
                                    </div>
                                </div>
                                <div className="px-4 py-2">
                                    <div className="mb-4 border-b border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">可观影地区</p>
                                        <p className={`font-bold ${item.area.type === 'success' ? 'text-green-600' : ''}`}>{item.area.text}</p>
                                    </div>
                                </div>
                                <div className="px-4 py-2">
                                    <div className="mb-4 border-b border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">是否独立车位</p>
                                        <p className={`font-bold ${item.sole.type === 'success' ? 'text-green-600' : ''}`}>{item.sole.text}</p>
                                    </div>
                                </div>
                                <div className="px-4 py-2">
                                    <div className="mb-4 border-gray-400 pb-2">
                                        <p className="text-sm text-gray-500">稳定性</p>
                                        <p className={`font-bold ${item.rate.type === 'success' ? 'text-green-600' : ''}`}>{item.rate.text}</p>
                                    </div>
                                </div>

                            </div>
                        ))
                    }
                </div>
                
            </div>
            <div className="max-w-5xl w-full mx-auto pt-2 md:pt-10 px-4 md:px-2 lg:px-0 bg-white pb-40">
             
                <div className="flex flex-col justify-center items-center p-4 w-full h-20 border-b">
                    <button className="bg-red-600 px-6 rounded-md font-bold active:bg-red-500 h-20 md:h-full text-white w-full md:max-w-40" onClick={e => subHandler()}>下一步</button>
                </div>
                <p className="mt-5 text-gray-400 text-sm">
                    所有账号均是4K高级账号，并且都支持所有设备登陆，可以同户验证，自助获取验证码信息，付款之后，将会在 <a className="mya" href="https://ok123.shop/mine/sub">我的订阅</a>中查看到您的账号信息，同时也会发账号信息到您注册的
                    <a className="mya">短信或邮件</a>
                    中。
                </p>
            </div>
            

        </main>
    );
}
